<template>
  <div class="menu">
    <el-aside>
      <div>
        <div class="t1">
          <img src="../../assets/logo.jpg" alt="" class="logo" />
          <span class="title">海报设计系统</span>
        </div>
        <el-menu
          router
          default-active="2"
          class="el-menu-vertical-demo"
          active-text-color="#ffd04b"
          background-color="rgb(88, 103, 131)"
        >
          <template v-for="(item, index) in filteredMenus" :key="index">
            <!-- 如果父路由有多个子路由，则使用 el-submenu -->
            <el-submenu v-if="item.children.length > 1" :index="index + ''">
              <template slot="title">
                <i :class="item.iconClass"></i>
                <span style="font-size: 18px">{{ item.name }}</span>
              </template>
              <el-menu-item-group v-for="(child, childIndex) in item.children" :key="childIndex">
                <el-menu-item :index="child.path">{{ child.name }}</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <!-- 如果父路由只有一个子路由，则直接显示子路由 -->
            <el-menu-item v-else :index="item.children[0].path">
              <i :class="item.iconClass"></i>
              <span style="font-size: 18px">{{ item.children[0].name }}</span>
            </el-menu-item>
          </template>
        </el-menu>
      </div>
    </el-aside>
  </div>
</template>


<script>
export default {
  data() {
    return {
      menus: [],
    };
  },
  computed: {
    filteredMenus() {
      // 过滤掉只有一个子路由的父路由
      return this.menus.filter((route) => route.children && route.children.length > 0);
    },
  },
  created() {
    this.menus = [...this.$router.options.routes];
  },
  methods: {},
};
</script>


<style scoped>
.t1 {
  display: flex;
  justify-content: center;
  align-items: center;
}
.menu {
  background-color: rgb(88, 103, 131);
  .el-aside {
    height: 100%;
    .el-menu {
      height: 100%;
    }
  }
}
.logo {
  height: 50px;
  width: 50px;
  vertical-align: middle;
  border-radius: 50%;
}
.title {
  font-size: 20px;
  color: aliceblue;
}
</style>>